<ui:composition xmlns="http://www.w3.org/1999/xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:p="http://primefaces.org/ui"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:c="http://java.sun.com/jsp/jstl/core"
        template="/pages/templates/template.xhtml">
        <ui:define name="metadata">
        </ui:define>
        
        <ui:define name="content">

			<h:form id="form1">
	
	Nova Mensagem: <br />
				<h:inputTextarea id="novaMensagemId" value="#{timelineBean.novaMensagemTexto}" >
					<f:validateLength maximum="140" for="novaMensagemId"/>
				</h:inputTextarea>
				<br />
				<h:commandButton id="enviarMensagem" value="Enviar Mensagem" action="#{timelineBean.enviarMensagem}">
					<f:ajax execute="novaMensagemId" render="panelMensagem novaMensagemId" />
				</h:commandButton>
	
				<br />
				<br />
				<h:panelGroup id="panelMensagem">
					<c:forEach items="#{timelineBean.mensagens}" var="mensagem">
						<p:fieldset>
							<h:panelGrid columns="2">
								<table>
									<h:outputText id="nomeUsuario" value="#{mensagem.perfil.nome} diz:" />
	
									<h:outputText id="dataCriacao" value="#{mensagem.dataCriacao}">
										<f:convertDateTime for="#{mensagem.dataCriacao}"
											pattern="dd/MM/yyyy HH:mm:ss" timeZone="GMT-3" />
									</h:outputText>
								</table>
	
								<p:graphicImage id="fotoPerfil" value="/images/perfil.jpg" width="90" height="90" />
								<h:outputText id="mensagemTexto" value="#{mensagem.texto}" />
							</h:panelGrid>
						</p:fieldset>
						<br />
					</c:forEach>
				</h:panelGroup>
	
			</h:form>

	</ui:define>
</ui:composition>
